import { useMemo, useState } from 'react'
import { unionWithdrawalList, unionTurnList } from '../../../api/union'
import NavBar from '../../../components/Navbar'
import './index.less'
import { useEffect } from 'react'
import { InfiniteScroll, Toast } from 'antd-mobile'

const tabData = [
  { title: '提现明细', id: 1 },
  { title: `${window.baseConfig.coin_name}转换明细`, id: 2 }
]
const statusType = {
  1: 'pending',
  4: 'pending',
  5: 'failed',
  2: 'completed',
  3: 'failed'
}
const statusText = {
  1: '提现中',
  2: '提现成功',
  3: '提现失败',
  4: '打款中',
  5: '提现拒绝'
}

let page = 0
let loading = false
export default function UnionDetail() {
  const [type, setType] = useState(1)
  const [data, setData] = useState([])
  // const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(false)

  const getList = () => {
    return new Promise((resolve, reject) => {
      Toast.show({
        content: '加载中',
        icon: 'loading',
        maskClickable: false
      })
      page = page + 1
      ;(type === 1 ? unionWithdrawalList : unionTurnList)({ page })
        .then((res) => {
          if (res.data && res.data?.length) {
            setData(page === 1 ? res.data : data.concat(res.data))
          }
          if (res.data && res.data?.length >= 10) {
            setHasMore(true)
          } else {
            setHasMore(false)
          }
          Toast.clear()
          resolve(true)
        })
        .catch((err) => {
          resolve(true)
          setHasMore(false)
          Toast.show({
            position: 'bottom',
            content: err.message
            // icon: ''
          })
        })
    })
  }

  useEffect(() => {
    console.log('type 切换', type, page)
    // setPage(1)
    page = 0
    setData([])
    setHasMore(false)
    getList()
  }, [type])

  return (
    <div className="union_detail_wrap">
      <NavBar title="明细" />

      <div className="union tab_bar">
        {tabData.map((item) => (
          <div key={item.id} className={`tab ${item.id === type ? 'active' : ''}`} onClick={() => setType(item.id)}>
            {item.title}
          </div>
        ))}
      </div>
      <div className={`log_list with`}>
        {data.map((item, idx) => (
          <div key={String(idx)} className={`log-item ${statusType[item.status]}`}>
            <div className="info">
              {type === 1 ? (
                <div className="log_txt p">
                  {type === tabData[0].id ? statusText[item.status] : item?.note}
                  {item.failReason ? <span>（{item.failReason}）</span> : null}
                </div>
              ) : (
                <div className="log_txt p">{item.note || '转换-收益转换'}</div>
              )}
              <div className="log_time s">{item?.addtime || ''}</div>
            </div>
            <div className="data">
              {type === 1 ? (
                <div className="num p">{(item?.money || '') + '元'}</div>
              ) : (
                <div className="num p">-{(item?.get_nums || '') + `${window.baseConfig.coin_name}`}</div>
              )}
            </div>
          </div>
        ))}
        <InfiniteScroll loadMore={getList} hasMore={hasMore} threshold={50} />
      </div>
    </div>
  )
}
